<template>
    <div v-if="book_info">
        <!--书籍详情-->
        <div class="book-info">
            <div class="book-info-top">
                <a href=""><img :src="book_info.cover" alt=""></a>
                <a href="">
                    <span v-text="book_info.name"></span>
                    <span>{{book_info.cate.name}} | <span>连载中</span></span>
                    <span>字数 <i>{{book_info.words}}字</i></span>
                    <span>浏览量 <i>{{book_info.pv}}次</i></span>
                </a>
            </div>
            <div class="book-info-bottom">
                <!--            <a href="../assets/book/chapter/read" type="button" class="layui-btn layui-btn-sm layui-btn-normal">开始阅读</a>-->
                <router-link :to="{name:'BookRead',params:{book_id:book_info.id,chapter_index:0}}">
                    <el-button type="success" size="mini">开始阅读</el-button>
                </router-link>
                <!--            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">加入书架</button>-->
                <el-button type="primary" size="mini">加入书架</el-button>
            </div>
            <div class="book-info-descr">
                {{book_info.descr.slice(0,40)}}...
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name:"detail",
        props:{
            book_info:null
        }
    }
</script>

<style scoped>
    .book-info{
        display: flex;
        flex-flow: column nowrap;
        background-color: white;
        margin-top: 2.8rem;
    }
    .book-info-top{
        display: flex;
        width: 100vw;
        justify-content:flex-start;
    }
    .book-info-top > a:first-of-type{
        max-width: 28vw;
        margin-left: 1rem;
    }
    .book-info-top > a:first-of-type>img{
        width:100%;
    }
    .book-info-top > a:last-of-type{
        margin-left: 2rem;
        display: flex;
        flex-flow: column nowrap;
        /*font-size: 1rem;*/
        /*font-weight: bold;*/
        justify-content: space-around;
    }
    .book-info-top > a:last-of-type > span:first-of-type{
        font-size: 1.1rem;
        font-weight: bold;
    }
    .book-info-top > a > span >i{
        color: #795da3;
        font-size: 0.7rem;
    }
    .book-info-bottom{
        margin-top: 0.5rem;
        display: flex;
        justify-content: flex-end;
        margin-right: 2rem;
        margin-bottom: 0.5rem;
    }
    .book-info-descr{
        font-size: 1rem;
        color: #6b6665;
        text-indent: 2rem;
    }

</style>